<template>
  <div style="opacity: 0.9" class="message">
    <el-card class="animate__animated animate__fadeInLeft publish">
      <div class="author">
        <el-avatar v-if="userInfo==null" icon="el-icon-userModule-solid" size="large"
                   style="background-color: #666"></el-avatar>
        <el-avatar v-else :src="userInfo.avatar" size="large"></el-avatar>
        <div>
          <div class="nkname">
            <span class="name" v-if="userInfo==null">匿名用户</span>
            <span class="name" v-else>{{ userInfo.nickname }} </span>
          </div>
        </div>
      </div>
      <el-form :model="formData" :rules="formRules" ref="messageFormRef">
        <el-form-item prop="content">
          <el-input :rows="5" v-model="formData.content" type="textarea" placeholder="请输入你的留言"></el-input>
        </el-form-item>
        <el-form-item prop="anonymous" class="e_form_item is-required">
          <el-checkbox v-model="formData.anonymous" true-label="1" false-label="0">匿名发布</el-checkbox>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="handleAdd">点击发表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="list.length>0" class="animate__animated animate__fadeInLeft">
      <ul style="padding: 0;" class="comment-list">
        <li class="comment" v-for="(item,index) in list" :key="index">
          <el-avatar v-if="item.avatar!==''" :src="item.avatar"></el-avatar>
          <el-avatar v-else icon="el-icon-userModule-solid"></el-avatar>
          <div class="content">
            <div style="display: flex;justify-content: space-between;width: 100%">
              <div class="nkname">
                <span class="name">{{ item.nickname }} </span>
                <span class="date">{{ item.createTime | dateFormat3 }}</span>
              </div>
            </div>
            <div class="dflex-a" style="width: 100%;">
              <p class="reply flex1">{{ item.content }}</p>
              <div style="width: 150px;text-align: right" class="row-end">
                <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDel(item)">
                  <el-button slot="reference" type="text" v-if="item.self">删除</el-button>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </el-card>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { reqMessagesList } from '../../api/touristApi'
import { reqAllPicList } from '../../api/uploadApi'
import { reqAddMessage, reqDelMessage, reqEditMessage } from '@/api/consumerApi'

const defQuery = () => {
  return {
    pageNum: 1,
    pageSize: 20
  }
}
export default {
  data() {
    return {
      queryParams: defQuery(),
      picList: [],
      editing: false,
      list: [],
      formData: {
        content: ''
      },
      formRules: {
        content: [
          { required: true, message: "留言内容不能为空！" },
          { min: 0, max: 100, message: "留言内容不超过100字！" }
        ]
      },
      total: 0
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapState('user', ['isLogin', 'userInfo', 'administrator'])
  },
  methods: {
    refresh() {
      this.getList()
    },
    // 留言发表
    handleAdd() {
      this.$refs.messageFormRef.validate(async valid => {
        if (!valid) return
        this.formData.uid = this.userInfo.userId
        reqAddMessage(this.formData).then(data => {
          this.$message.success("留言发表成功");
          this.refresh()
        })
      })
    },
    handleDel(item) {
      reqDelMessage(item.id).then(data => {
        this.$message.success("删除成功");
        this.refresh()
      })
    },
    /**
     * 获取留言列表
     */
    getList() {
      reqMessagesList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleCurrentChange(newSize) {
      this.queryParams.pageNum = newSize
      this.getList()
    },
    handleSizeChange(newSize) {
      this.queryParams.pageSize = newSize
      this.getList()
    },
  },
}
</script>

<style scoped lang="less">
.el-container {
  display: block;
}

.publish {
  margin-bottom: 20px;
}

.author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;

  .nkname {
    margin: 10px;
  }
}

.img {
  width: 300px;
  margin: 20px;
}

.comment {
  border-bottom: 1px dashed #ccc;
  margin: 30px 0;
  display: flex;
}

/*.el-avatar {*/
/*    width: 35px;*/
/*    height: 35px;*/
/*    border: 2px solid white;*/
/*    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .06);*/
/*    flex-shrink: 0;*/
/*}*/

.content {
  text-align: left;
  font-size: 14px;
  flex-grow: 1;

  .nkname {
    margin-left: 10px;
    max-width: 530px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .rp, .date {
      color: #999;
      margin-left: 10px;
    }

    .blog {
      color: #349edf;
      margin-left: 10px;
    }
  }

  .reply {
    margin-left: 10px;
  }

  .op {
    color: #ddd;
    font-weight: lighter;

    .rep {
      color: #349edf;
    }

    .del {
      color: red;
    }
  }

  .op:hover {
    cursor: pointer;
  }
}
</style>
